<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>克隆节点对象</title>
</head>
<body>
    <div  class="clone">
        <p>第一个段落</p>
        <p>第二个段落</p>
        <p>第三个段落</p>
    </div>
    <div class="deepclone">
        <p>第一个深度克隆段落</p>
        <p>第二个深度克隆段落</p>
        <p>第三个深度克隆段落</p>
    </div>
    
</body>
<script type="text/javascript">
    var onediv=document.querySelector(".clone");
    console.log("onediv="+onediv);
    var onedivclone=onediv.cloneNode(false);
    console.log("onedivclone="+onedivclone);
    var twodiv=document.querySelector(".deepclone");
    console.log("twodiv="+twodiv);
    var twodivclone=twodiv.cloneNode(true);
    console.log("twodivclone="+twodivclone);

    //通过上面的比较可以知道深复制会把当前节点里面的子节点元素都复制
    //浅复制不会复制里面的子节点
    
</script>
</html>